Appearance

开发者面板 ​

快捷面板 ​

Ctrl+Shift+P命令面板 ​

输入关键字筛选命令，谨慎使用空格。 选择命令即执行命令。

txt
截图并保存，当前选中的元素
>Capture node screenshot

Ctrl+O文件面板 ​

选择文件，即在Sources面板中查看文件

Elements元素 ​

tab:调试技巧

主面板 ​

  • 查看页面节点属性及样式
  • 右键Break on添加Dom断点，添加后其归为DOM Breakpoints面板
    • subtree modifications 子节点发生变化时
    • attribute modifications 属性发生变化时
    • node removal 节点销毁时

Ctrl+F筛选 ​

  • 输入关键字，筛选相关文本
  • 输入选择器，定位相关元素

style样式子面板 ​

显示当前选中节点的样式

  1. 点击选择器空白处，添加样式
  2. 点击属性左侧勾选框，隐藏样式
  3. 点击加号图标添加样式并自动填充当前选择器路径
  4. 点击hov图标展开伪类筛选面板
  5. 点击右上角路径或ctrl+点击样式，进入其Sources源文件面板

Console控制台 ​

tab:调试技巧

  1. 输入变量** $0，引用在Elements面板选中过的节点**
  2. 输入变量** $_ ** ，引用上一次的计算结果
  3. 输入Shift+Enter，换行

Sources源代码 ​

主面板 ​

  • 点击左侧行数，或右键Add breakpoint，添加断点。刷新后当代码执行到断点行时暂停运行
  • 点击左侧行数，或右键Remove breakpoint，删除断点

工具栏 ​

  • 点击继续按钮，执行到下一个断点位置暂停

Page页面 ​

  1. 右键Save as可另存为源文件

watch监听面板 ​

  • 输入变量名，监听变量值
  • 可输入短语，获取计算后的变量值

Breakpoints断点 ​

  • 主面板中直接选中的断点，会被转移至此
  • 可通过右键删除

Scope作用域 ​

  • 显示当前作用域，及作用域内存在的变量

Call Stack调用栈顺序 ​

  • 先触发的在下，后触发的在上

DOM Breakpoints文档元素断点 ​

  • 元素界面添加的断点，会被转移至此

Event Listener Breakpoints事件监听断点 ​

  • 可给事件打上断点

Network网络 ​

Performance性能 ​

Memory内存 ​

Application应用 ​

Security 安全 ​

Lighthouse ​

进程面板 ​

入口：设置 => 更多工具 => 任务管理器 快捷键：alt ++ shift + esc

用于查看游览器各模块进程

模块介绍 ​

游览器 ​

初始进程

网络控制NetworkService ​
Storage Service ​
渲染主进程 ​

每个窗口对应一个渲染进程 窗口打开过多时，游览器内存会占用严重

主进程默认开启无限循环，并且监听消息队列里获取到的新任务，此为事件循环 event loop。 所有进程和线程都可以给渲染进程添加新任务。